﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>加载OSM地图</title>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src="./static/libs/include-mapboxgl-local.js"></script>
    <!--引入当前页面样式表-->
    <link href="./static/demo/mapboxgl/example/style.css" rel="stylesheet" type="text/css" />
    <style type='text/css'>
        #map {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id='map'>
        <div id="mouse-position">
        </div>
    </div>
    <script type="text/javascript">
        //使用严格模式
        "use strict";
        //实例化要加载的source来源对象
        var osm = {
            //来源类型为栅格瓦片
            "type": "raster",
            'tiles': [
                //来源请求地址
                "http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
            ],
            //栅格瓦片的分辨率
            'tileSize': 256
        };
        var map = new mapboxgl.Map({
            //地图容器div的id
            container: 'map',
            //设置地图样式信息
            style: {
                //设置版本号，一定要设置
                "version": 8,
                //添加来源
                "sources": {
                    "osm": osm,
                    "osm1": osm
                },
                //设置加载并显示来源的图层信息
                "layers": [{
                    //图层id，要保证唯一性
                    "id": "OSMLayer",
                    //图层类型
                    "type": "raster",
                    //图层来源
                    "source": "osm",
                    //图层最小缩放级数
                    "minzoom": 0,
                    //图层最大缩放级数
                    "maxzoom": 15
                },
                {
                    //图层id，要保证唯一性
                    "id": "OSMLayer1",
                    //图层类型
                    "type": "raster",
                    //图层来源
                    "source": "osm1",
                    //图层最小缩放级数
                    "minzoom": 0,
                    //图层最大缩放级数
                    "maxzoom": 15
                }

                ],
            },
            //地图中心点
            center: [114.39960479736327, 30.495722001885323],
            //地图当前缩放级数
            zoom: 0,
            //倾斜角度，与屏幕面的夹角（0-60）度
            pitch: 0
        });
        //注册鼠标移动事件
        map.on('mousemove', function (e) {
            //经纬度坐标转web墨卡托
            const earthRad = 6378137.0;
            const x = e.lngLat.lng * Math.PI / 180 * earthRad;
            const a = e.lngLat.lat * Math.PI / 180;
            const y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
            document.getElementById('mouse-position').innerHTML = "X轴：" + x.toFixed(2) + "，Y轴：" + y.toFixed(2);
        });
    </script>
</body>

</html>